<!DOCTYPE html>
<html lang=zh>
<head>
    <meta charset="utf-8">
    
    <title>Vuex学习 | Hexo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便地实现组件之间数据的共享 传统组件之间共享数据的方式：  父组件向子组件传值：v-bind 属性绑定 子组件向父组件传值：v-on 事件绑定 兄弟组件之间共享数据：EventBus $on：接收数据的组件 $emit：发送数据的组件    使用 Vuex 这个状态管理模式：  在 Vuex 中集中管理共享的数据，易于开发和后期维护 能够高">
<meta property="og:type" content="article">
<meta property="og:title" content="Vuex学习">
<meta property="og:url" content="http://dsjerry.gitee.io/mousejerry/2020/07/18/vuex%E5%AD%A6%E4%B9%A0/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便地实现组件之间数据的共享 传统组件之间共享数据的方式：  父组件向子组件传值：v-bind 属性绑定 子组件向父组件传值：v-on 事件绑定 兄弟组件之间共享数据：EventBus $on：接收数据的组件 $emit：发送数据的组件    使用 Vuex 这个状态管理模式：  在 Vuex 中集中管理共享的数据，易于开发和后期维护 能够高">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-07-18T08:16:45.000Z">
<meta property="article:modified_time" content="2020-07-21T09:00:16.363Z">
<meta property="article:author" content="smalljerry">
<meta property="article:tag" content="vue">
<meta property="article:tag" content="vuex">
<meta name="twitter:card" content="summary">
    

    
        <link rel="alternate" href="/" title="Hexo" type="application/atom+xml" />
    

    
        <link rel="icon" href="/mousejerry/css/images/ghaseminya.png" />
    

    
<link rel="stylesheet" href="/mousejerry/libs/font-awesome/css/font-awesome.min.css">

    
<link rel="stylesheet" href="/mousejerry/libs/open-sans/styles.css">

    
<link rel="stylesheet" href="/mousejerry/libs/source-code-pro/styles.css">


    
<link rel="stylesheet" href="/mousejerry/css/style.css">


    
<script src="/mousejerry/libs/jquery/2.1.3/jquery.min.js"></script>

    
    
        
<link rel="stylesheet" href="/mousejerry/libs/lightgallery/css/lightgallery.min.css">

    
    
        
<link rel="stylesheet" href="/mousejerry/libs/justified-gallery/justifiedGallery.min.css">

    
    
    
    


<meta name="generator" content="Hexo 5.0.0"></head>

<body>
    <div id="container">
        <header id="header">
    <div id="header-main" class="header-inner">
        <div class="outer">
            <a href="/mousejerry/" id="logo">
                <i class="logo"></i>
                <span class="site-title">Hexo</span>
            </a>
            <nav id="main-nav">
                
                    <a class="main-nav-link" href="/mousejerry/.">首页</a>
                
                    <a class="main-nav-link" href="/mousejerry/archives">归档</a>
                
                    <a class="main-nav-link" href="/mousejerry/categories">分类</a>
                
                    <a class="main-nav-link" href="/mousejerry/tags">标签</a>
                
                    <a class="main-nav-link" href="/mousejerry/about">关于</a>
                
            </nav>
            
                
                <nav id="sub-nav">
                    <div class="profile" id="profile-nav">
                        <a id="profile-anchor" href="javascript:;">
                            <img class="avatar" src="https://avatars2.githubusercontent.com/u/53891546?s=460&amp;u=6f987551976f2fcd6f2f49ab5b714fb72671f902&amp;v=4" />
                            <i class="fa fa-caret-down"></i>
                        </a>
                    </div>
                </nav>
            
            <div id="search-form-wrap">

    <form class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
        <button type="submit" class="search-form-submit"></button>
    </form>
    <div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="想要查找什么..." />
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/mousejerry/',
        CONTENT_URL: '/mousejerry/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

<script src="/mousejerry/js/insight.js"></script>


</div>
        </div>
    </div>
    <div id="main-nav-mobile" class="header-sub header-inner">
        <table class="menu outer">
            <tr>
                
                    <td><a class="main-nav-link" href="/mousejerry/.">首页</a></td>
                
                    <td><a class="main-nav-link" href="/mousejerry/archives">归档</a></td>
                
                    <td><a class="main-nav-link" href="/mousejerry/categories">分类</a></td>
                
                    <td><a class="main-nav-link" href="/mousejerry/tags">标签</a></td>
                
                    <td><a class="main-nav-link" href="/mousejerry/about">关于</a></td>
                
                <td>
                    
    <div class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
    </div>

                </td>
            </tr>
        </table>
    </div>
</header>

        <div class="outer">
            
                

<aside id="profile">
    <div class="inner profile-inner">
        <div class="base-info profile-block">
            <img id="avatar" src="https://avatars2.githubusercontent.com/u/53891546?s=460&amp;u=6f987551976f2fcd6f2f49ab5b714fb72671f902&amp;v=4" />
            <h2 id="name">SmallJerry</h2>
            <h3 id="title">————</h3>
            <span id="location"><i class="fa fa-map-marker"></i>Mar</span>
            <a id="follow" target="_blank" href="https://github.com/dsjerry">关注我</a>
        </div>
        <div class="article-info profile-block">
            <div class="article-info-block">
                18
                <span>文章</span>
            </div>
            <div class="article-info-block">
                18
                <span>标签</span>
            </div>
        </div>
        
        <div class="profile-block social-links">
            <table>
                <tr>
                    
                    
                    <td>
                        <a href="https://github.com/dsjerry" target="_blank" title="github" class=tooltip>
                            <i class="fa fa-github"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="/mousejerry/" target="_blank" title="rss" class=tooltip>
                            <i class="fa fa-rss"></i>
                        </a>
                    </td>
                    
                </tr>
            </table>
        </div>
        
    </div>
</aside>

            
            <section id="main"><article id="post-vuex学习" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 class="article-title" itemprop="name">
            Vuex学习
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/mousejerry/2020/07/18/vuex%E5%AD%A6%E4%B9%A0/">
            <time datetime="2020-07-18T08:16:45.000Z" itemprop="datePublished">2020-07-18</time>
        </a>
    </div>


                        
    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="/mousejerry/categories/%E8%87%AA%E5%B7%B1%E5%AD%A6%E4%B9%A0/">自己学习</a>
    </div>

                        
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link-link" href="/mousejerry/tags/vue/" rel="tag">vue</a>, <a class="tag-link-link" href="/mousejerry/tags/vuex/" rel="tag">vuex</a>
    </div>

                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <p>Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便地实现组件之间数据的共享</p>
<p>传统组件之间共享数据的方式：</p>
<ol>
<li>父组件向子组件传值：v-bind 属性绑定</li>
<li>子组件向父组件传值：v-on 事件绑定</li>
<li>兄弟组件之间共享数据：EventBus<ul>
<li>$on：接收数据的组件</li>
<li>$emit：发送数据的组件</li>
</ul>
</li>
</ol>
<p>使用 Vuex 这个状态管理模式：</p>
<ol>
<li>在 Vuex 中集中管理共享的数据，易于开发和后期维护</li>
<li>能够高效地实现组件之间的数据共享，提高开发效率</li>
<li>存储在 Vuex 中的数据都是<strong>响应式的</strong>，能够实时保持数据与页面的同步</li>
</ol>
<p>什么时候应该使用 Vuex ？<a id="more"></a></p>
<ol>
<li>一般情况下组件之间共享数据才有必要使用 Vuex，如果是组件的私有数据，保存在组件自己的 <code>data</code> 中就好了</li>
<li>如果不是大型的单页面应用，使用 Vuex 可能是繁琐冗余的。简单的项目就不用使用了。</li>
</ol>
<h1 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h1><p>安装 Vuex 依赖包</p>
<p><code>npm install vuex --save</code></p>
<p>导入</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vuex <span class="keyword">from</span> <span class="string">&quot;vuex&quot;</span></span><br><span class="line">Vue.use(Vuex)</span><br></pre></td></tr></table></figure>

<p>创建 <code>store</code> 对象</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">    state: &#123;</span><br><span class="line">        count: <span class="number">0</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>将 store 对象挂载到 Vue 实例中</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    render: <span class="function"><span class="params">h</span> =&gt;</span> h(app),</span><br><span class="line">    router,</span><br><span class="line">    store</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<blockquote>
<p>也可以在脚手架直接创建</p>
</blockquote>
<h1 id="核心概念"><a href="#核心概念" class="headerlink" title="核心概念"></a>核心概念</h1><p>核心概念有：state、mutation、getter、action。要访问它们，各自都有两种方法，第一种是正常使用，第二种是在<code>要使用数据的组件</code>中导入 mapXXX函数</p>
<h2 id="State"><a href="#State" class="headerlink" title="State"></a>State</h2><p>state 提供唯一的公共数据源，所有共享的数据放到 store 中的 state 中。<code>类似于 data</code></p>
<ul>
<li>在 Vuex 的入口文件中创建 Vuex 对象后，创建 Vuex 对象</li>
</ul>
<p>组件中要访问 state 中数据的</p>
<p><strong>方法①</strong>：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">this</span>.$store.state.全局数据名称</span><br></pre></td></tr></table></figure>

<ul>
<li><p>在插值表达式中使用上面代码时，<code>this</code> 可以省略</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>数值：&#123;&#123; $store.state.count &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></table></figure>

</li>
</ul>
<p><strong>方法②</strong></p>
<p>从 Vuex 中按需导入<code>mapState</code> 函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; mapState &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br></pre></td></tr></table></figure>

<p>然后通过这个导入的函数，将当前组件需要的全局数据映射为当前组件的计算属性 <strong>computed</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">computed: &#123;</span><br><span class="line">    ...mapState([<span class="string">&#x27;count&#x27;</span>])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p><code>...</code> 对象展开运算符</p>
<ul>
<li><code>mapState</code> 返回的是一个对象，要将它与局部计算属性混合使用，就需要将多个对象合并成一个。所以这里使用<strong>对象展开运算符</strong></li>
</ul>
</blockquote>
<blockquote>
<p>对象展开运算符（不知道怎么翻译，就这样吧）</p>
<ul>
<li><p>Reset Properties </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> &#123; x, y, ...z &#125; = &#123;<span class="attr">x</span>: <span class="number">1</span>, <span class="attr">y</span>: <span class="number">2</span>, <span class="attr">a</span>: <span class="number">3</span>, <span class="attr">b</span>: <span class="number">4</span>&#125;</span><br><span class="line"><span class="comment">// x:1, y:2, z: &#123;a: 3, b:4&#125;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>Spread Properties</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> n = &#123;x, y, ...z&#125;</span><br><span class="line">n; <span class="comment">// &#123;x: 1, y: 2, a: 3, b: 4&#125;</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</blockquote>
<p><strong>方法②例子</strong></p>
<ul>
<li><p>在需要的组件中引入 <code>mapState</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; mapState &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>在当前组件中的计算属性定义</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">...mapState( [<span class="string">&quot;count&quot;</span>] )</span><br></pre></td></tr></table></figure>
</li>
<li><p>在 html 中使用（直接使用）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>&#123; count &#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br></pre></td></tr></table></figure>



</li>
</ul>
<h2 id="Mutation"><a href="#Mutation" class="headerlink" title="Mutation"></a>Mutation</h2><p>更改 Vuex 的 store 中的状态（数据）的唯一方法是提交 mutation。<code>类似于事件</code></p>
<h3 id="定义"><a href="#定义" class="headerlink" title="定义"></a>定义</h3><p>在 Vuex 的入口文件中</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">    state: &#123;</span><br><span class="line">        count: <span class="number">0</span></span><br><span class="line">    &#125;,</span><br><span class="line">    mutations: &#123;</span><br><span class="line">        <span class="comment">// 没有参数</span></span><br><span class="line">        add(state) &#123;</span><br><span class="line">            state.count++</span><br><span class="line">        &#125;，</span><br><span class="line">        <span class="comment">// 携带参数</span></span><br><span class="line">        addN(state, step)&#123;</span><br><span class="line">            state.count += step</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="触发"><a href="#触发" class="headerlink" title="触发"></a>触发</h3><p>有两种方法：<code>this.$store.commit()</code> 和 <code>mapMutations</code></p>
<p><strong>方法①</strong></p>
<p>在 <em>要使用到的组件</em> 里面</p>
<ul>
<li><p>里面先要有对应的事件处理函数，比如 addBtn 事件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">methods: &#123;</span><br><span class="line">   addBtn() &#123;</span><br><span class="line">       <span class="built_in">this</span>.$store.commit(<span class="string">&quot;add&quot;</span>)</span><br><span class="line">   &#125;,</span><br><span class="line">   addNBtn() &#123;</span><br><span class="line">       <span class="built_in">this</span>.$store.commit(<span class="string">&quot;addN&quot;</span>, <span class="number">3</span>)</span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>commit 里面对应的参数就是在 mutation 里面定义的内容</p>
</blockquote>
</li>
</ul>
<p><strong>方法②</strong></p>
<p>从需要的组件中按需导入 <code>mapMutations</code> 函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; mapMutations &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br></pre></td></tr></table></figure>

<p>通过展开运算符将 mutations 中的函数映射为当前组件中的 methods</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">methods: &#123;</span><br><span class="line">    ...mapMutations( [<span class="string">&#x27;add&#x27;</span>, <span class="string">&#x27;addN&#x27;</span>] )</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>然后在 methods 中加入对应的时间处理函数，比如是页面的 addBtn 和 addNBtn</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">methods: &#123;</span><br><span class="line">    ...mapMutations( [<span class="string">&#x27;add&#x27;</span>, <span class="string">&#x27;addN&#x27;</span>] ),</span><br><span class="line">    addBtn() &#123;</span><br><span class="line">        <span class="built_in">this</span>.add()</span><br><span class="line">    &#125;,</span><br><span class="line">    addNBtn() &#123;</span><br><span class="line">        <span class="built_in">this</span>.addN(<span class="number">3</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>其实是可以直接调用映射来的方法的，因为它本来就是映射过来的方法，不用在另外的方法里面调用也行</p>
</blockquote>
<h2 id="Action"><a href="#Action" class="headerlink" title="Action"></a>Action</h2><p>Action 类似于 Mutation，但用于处理异步操作，是通过触发 Mutation 来修改数据</p>
<h3 id="定义-1"><a href="#定义-1" class="headerlink" title="定义"></a>定义</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">    state: &#123;</span><br><span class="line">        count: <span class="number">0</span></span><br><span class="line">    &#125;,</span><br><span class="line">    mutations: &#123;</span><br><span class="line">        add(state) &#123;</span><br><span class="line">            state.count++</span><br><span class="line">        &#125;,</span><br><span class="line">        addN(state, step) &#123;</span><br><span class="line">            state.count += step</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    actions: &#123;</span><br><span class="line">        addAsync(context) &#123;</span><br><span class="line">            setTimeOut( <span class="function">() =&gt;</span> &#123;</span><br><span class="line">                context.commit(<span class="string">&quot;add&quot;</span>)</span><br><span class="line">            &#125;, <span class="number">1000</span> )</span><br><span class="line">        &#125;,</span><br><span class="line">        addNAsync(context, step) &#123;</span><br><span class="line">            setTimeOut( <span class="function">() =&gt;</span> &#123;</span><br><span class="line">                context.commit(<span class="string">&quot;addN&quot;</span>, step)</span><br><span class="line">            &#125;, <span class="number">1000</span> )</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<ul>
<li>这里的 commit 中的函数只能是在 mutation中的函数，使用 <code>context</code> 来调用</li>
</ul>
<h3 id="触发-1"><a href="#触发-1" class="headerlink" title="触发"></a>触发</h3><p><strong>方法①</strong></p>
<p>在需要使用的组件中</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">methods: &#123;</span><br><span class="line">    addBtn() &#123;</span><br><span class="line">        <span class="built_in">this</span>.$store.dispatch(<span class="string">&quot;addAsync&quot;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    addNBtn() &#123;</span><br><span class="line">        <span class="built_in">this</span>.$store.dispatch(<span class="string">&quot;addNAsync&quot;</span>, <span class="number">3</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<p><strong>方法②</strong></p>
<p>导入模块 <code>mapActions</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; mapActions &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br></pre></td></tr></table></figure>

<p>将需要的函数映射为当前组件的 methods</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">methods: &#123;</span><br><span class="line">    ...mapActions( [<span class="string">&#x27;addAsync&#x27;</span>, <span class="string">&#x27;addNAsync&#x27;</span>] )</span><br><span class="line">    addBtnAsync() &#123;</span><br><span class="line">        <span class="built_in">this</span>.addAsync()</span><br><span class="line">    &#125;</span><br><span class="line">    addNBtnAsync() &#123;</span><br><span class="line">        <span class="built_in">this</span>.addNasync(<span class="number">3</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>也可以直接使用，不用另外再在页面声明一个事件处理函数来调用</p>
</blockquote>
<p>直接调用 <code>...mapActions</code> 映射过来的方法</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;addNAsync(3)&quot;</span>&gt;</span>加N<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>





<h2 id="Getter"><a href="#Getter" class="headerlink" title="Getter"></a>Getter</h2><p>有时候我们需要从 store 中的 state 中派生出一些状态(数据)，getter 就是对 store 中的数据进行加工后形成新的数据，类似于<strong>计算属性</strong></p>
<p>store 中的数据发生变化，getter 的数据也会跟着变化</p>
<h3 id="定义-2"><a href="#定义-2" class="headerlink" title="定义"></a>定义</h3><p>在 Vuex 的入口文件中</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">    state: &#123;</span><br><span class="line">        count: <span class="number">0</span></span><br><span class="line">    &#125;,</span><br><span class="line">    getters: &#123;</span><br><span class="line">        showNum: <span class="function"><span class="keyword">function</span>(<span class="params">state</span>) </span>&#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&#x27;当前的数值是&#x27;</span> + state.count</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>



<h3 id="触发-2"><a href="#触发-2" class="headerlink" title="触发"></a>触发</h3><p><strong>方法①</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">this</span>.$store.getters.名称</span><br></pre></td></tr></table></figure>

<p><strong>方法②</strong></p>
<p>使用 <code>mapGetters</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; mapGetters &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br></pre></td></tr></table></figure>

<p>映射在当前的计算属性中</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">computed: &#123;</span><br><span class="line">    ...mapGetters( [<span class="string">&#x27;showNum&#x27;</span>] )</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>例如</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--正常使用数据--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>当前的数值是：&#123;&#123; $store.state.count &#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--使用 mapGetters 的时候--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>&#123;&#123; showNum &#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h1 id="案例代码"><a href="#案例代码" class="headerlink" title="案例代码"></a>案例代码</h1><p><a target="_blank" rel="noopener" href="https://github.com/dsjerry/Vuex-">Github</a></p>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



    <div class="a2a_kit a2a_default_style">
    <a class="a2a_dd" target="_blank" rel="noopener" href="https://www.addtoany.com/share">分享到</a>
    <span class="a2a_divider"></span>
    <a class="a2a_button_wechat" title="微信"></a>
    <a class="a2a_button_sina_weibo" title="微博"></a>
    <a class="a2a_button_email" title="邮件"></a>
    <a class="a2a_button_qzone" title="QQ空间"></a>
    <!--    <a class="a2a_button_pinterest"></a>-->
<!--    <a class="a2a_button_tumblr"></a>-->
</div>
<script type="text/javascript" src="//static.addtoany.com/menu/page.js"></script>
<style>
    .a2a_menu {
        border-radius: 4px;
    }
    .a2a_menu a {
        margin: 2px 0;
        font-size: 14px;
        line-height: 16px;
        border-radius: 4px;
        color: inherit !important;
        font-family: 'Microsoft Yahei';
    }
    #a2apage_dropdown {
        margin: 10px 0;
    }
    .a2a_mini_services {
        padding: 10px;
    }
    a.a2a_i,
    i.a2a_i {
        width: 122px;
        line-height: 16px;
    }
    a.a2a_i .a2a_svg,
    a.a2a_more .a2a_svg {
        width: 16px;
        height: 16px;
        line-height: 16px;
        vertical-align: top;
        background-size: 16px;
    }
    a.a2a_i {
        border: none !important;
    }
    a.a2a_menu_show_more_less {
        margin: 0;
        padding: 10px 0;
        line-height: 16px;
    }
    .a2a_mini_services:after{content:".";display:block;height:0;clear:both;visibility:hidden}
    .a2a_mini_services{*+height:1%;}
</style>


</div>

            
    
        <a href="http://dsjerry.gitee.io/mousejerry/2020/07/18/vuex%E5%AD%A6%E4%B9%A0/#comments" class="article-comment-link disqus-comment-count" data-disqus-url="http://dsjerry.gitee.io/mousejerry/2020/07/18/vuex%E5%AD%A6%E4%B9%A0/">评论</a>
    

        </footer>
    </div>
    
        
<nav id="article-nav">
    
        <a href="/mousejerry/2020/07/21/%E4%BC%9A%E8%AF%9D%E6%8A%80%E6%9C%AF/" id="article-nav-newer" class="article-nav-link-wrap">
            <strong class="article-nav-caption">上一篇</strong>
            <div class="article-nav-title">
                
                    会话技术
                
            </div>
        </a>
    
    
        <a href="/mousejerry/2020/07/12/JS%E4%B8%80%E4%BA%9B%E7%AC%94%E8%AE%B0/" id="article-nav-older" class="article-nav-link-wrap">
            <strong class="article-nav-caption">下一篇</strong>
            <div class="article-nav-title">JS一些笔记</div>
        </a>
    
</nav>


    
</article>


    
    <section id="comments">
    
        
    <div id="disqus_thread">
        <noscript>Please enable JavaScript to view the <a target="_blank" rel="noopener" href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>

    
    </section>

</section>
            
                <aside id="sidebar">
   
        
    <div class="widget-wrap">
        <h3 class="widget-title">标签云</h3>
        <div class="widget tagcloud">
            <a href="/mousejerry/tags/PHP/" style="font-size: 13.33px;">PHP</a> <a href="/mousejerry/tags/apache/" style="font-size: 10px;">apache</a> <a href="/mousejerry/tags/express/" style="font-size: 10px;">express</a> <a href="/mousejerry/tags/js/" style="font-size: 13.33px;">js</a> <a href="/mousejerry/tags/node-js/" style="font-size: 10px;">node.js</a> <a href="/mousejerry/tags/php/" style="font-size: 16.67px;">php</a> <a href="/mousejerry/tags/python/" style="font-size: 10px;">python</a> <a href="/mousejerry/tags/vscode-%E6%8F%92%E4%BB%B6/" style="font-size: 10px;">vscode,插件</a> <a href="/mousejerry/tags/vue/" style="font-size: 20px;">vue</a> <a href="/mousejerry/tags/vuex/" style="font-size: 10px;">vuex</a> <a href="/mousejerry/tags/webpack/" style="font-size: 10px;">webpack</a> <a href="/mousejerry/tags/%E5%89%8D%E7%AB%AF/" style="font-size: 10px;">前端</a> <a href="/mousejerry/tags/%E5%90%8E%E7%AB%AF/" style="font-size: 10px;">后端</a> <a href="/mousejerry/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/" style="font-size: 10px;">微信小程序</a> <a href="/mousejerry/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/" style="font-size: 10px;">数据结构</a> <a href="/mousejerry/tags/%E6%B5%8B%E8%AF%95/" style="font-size: 10px;">测试</a> <a href="/mousejerry/tags/%E7%88%AC%E8%99%AB/" style="font-size: 10px;">爬虫</a> <a href="/mousejerry/tags/%E9%9A%8F%E7%AC%94/" style="font-size: 10px;">随笔</a>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">分类</h3>
        <div class="widget">
            <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/mousejerry/categories/%E6%8A%80%E5%B7%A7%E5%AD%A6%E4%B9%A0/">技巧学习</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/mousejerry/categories/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/">数据结构</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/mousejerry/categories/%E8%87%AA%E5%B7%B1%E5%AD%A6%E4%B9%A0/">自己学习</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/mousejerry/categories/%E8%AF%BE%E5%A0%82%E5%AD%A6%E4%B9%A0/">课堂学习</a><span class="category-list-count">5</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">最新文章</h3>
        <div class="widget">
            <ul id="recent-post" class="">
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/mousejerry/2020/08/10/test/" class="thumbnail">
    
    
        <span style="background-image:url(https://ejs.bootcss.com/assets/images/jake_display.png)" alt="test" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"></p>
                            <p class="item-title"><a href="/mousejerry/2020/08/10/test/" class="title">test</a></p>
                            <p class="item-date"><time datetime="2020-08-10T01:15:21.000Z" itemprop="datePublished">2020-08-10</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/mousejerry/2020/08/05/Vue-Router%E5%B0%8F%E6%8B%93%E5%B1%95/" class="thumbnail">
    
    
        <span style="background-image:url(https://ejs.bootcss.com/assets/images/jake_display.png)" alt="Vue Router知识小补充" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/mousejerry/categories/%E8%87%AA%E5%B7%B1%E5%AD%A6%E4%B9%A0/">自己学习</a></p>
                            <p class="item-title"><a href="/mousejerry/2020/08/05/Vue-Router%E5%B0%8F%E6%8B%93%E5%B1%95/" class="title">Vue Router知识小补充</a></p>
                            <p class="item-date"><time datetime="2020-08-05T01:17:50.000Z" itemprop="datePublished">2020-08-05</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/mousejerry/2020/07/28/php%E6%95%B0%E7%BB%84%E7%9A%84%E5%B8%B8%E7%94%A8%E5%87%BD%E6%95%B0/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/mousejerry/categories/%E8%AF%BE%E5%A0%82%E5%AD%A6%E4%B9%A0/">课堂学习</a></p>
                            <p class="item-title"><a href="/mousejerry/2020/07/28/php%E6%95%B0%E7%BB%84%E7%9A%84%E5%B8%B8%E7%94%A8%E5%87%BD%E6%95%B0/" class="title">php数组的常用函数</a></p>
                            <p class="item-date"><time datetime="2020-07-28T01:58:18.000Z" itemprop="datePublished">2020-07-28</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/mousejerry/2020/07/24/php%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/mousejerry/categories/%E6%8A%80%E5%B7%A7%E5%AD%A6%E4%B9%A0/">技巧学习</a></p>
                            <p class="item-title"><a href="/mousejerry/2020/07/24/php%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/" class="title">php开发环境搭建</a></p>
                            <p class="item-date"><time datetime="2020-07-24T07:28:40.000Z" itemprop="datePublished">2020-07-24</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/mousejerry/2020/07/23/vscode%E9%85%8D%E7%BD%AEphpcs/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/mousejerry/categories/%E6%8A%80%E5%B7%A7%E5%AD%A6%E4%B9%A0/">技巧学习</a></p>
                            <p class="item-title"><a href="/mousejerry/2020/07/23/vscode%E9%85%8D%E7%BD%AEphpcs/" class="title">vscode配置phpcs</a></p>
                            <p class="item-date"><time datetime="2020-07-23T09:06:35.000Z" itemprop="datePublished">2020-07-23</time></p>
                        </div>
                    </li>
                
            </ul>
        </div>
    </div>


    
        
    <div class="widget-wrap">
        <h3 class="widget-title">归档</h3>
        <div class="widget">
            <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/mousejerry/archives/2020/08/">八月 2020</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/mousejerry/archives/2020/07/">七月 2020</a><span class="archive-list-count">8</span></li><li class="archive-list-item"><a class="archive-list-link" href="/mousejerry/archives/2020/06/">六月 2020</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/mousejerry/archives/2020/05/">五月 2020</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/mousejerry/archives/2020/04/">四月 2020</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/mousejerry/archives/2020/03/">三月 2020</a><span class="archive-list-count">1</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">标签</h3>
        <div class="widget">
            <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/PHP/" rel="tag">PHP</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/apache/" rel="tag">apache</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/express/" rel="tag">express</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/js/" rel="tag">js</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/node-js/" rel="tag">node.js</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/php/" rel="tag">php</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/python/" rel="tag">python</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/vscode-%E6%8F%92%E4%BB%B6/" rel="tag">vscode,插件</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/vue/" rel="tag">vue</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/vuex/" rel="tag">vuex</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/webpack/" rel="tag">webpack</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/%E5%90%8E%E7%AB%AF/" rel="tag">后端</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/" rel="tag">微信小程序</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/" rel="tag">数据结构</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/%E6%B5%8B%E8%AF%95/" rel="tag">测试</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/%E7%88%AC%E8%99%AB/" rel="tag">爬虫</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/%E9%9A%8F%E7%AC%94/" rel="tag">随笔</a><span class="tag-list-count">1</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap widget-list">
        <h3 class="widget-title">链接</h3>
        <div class="widget">
            <ul>
                
                    <li>
                        <a target="_blank" rel="noopener" href="http://hexo.io">Hexo</a>
                    </li>
                
            </ul>
        </div>
    </div>


    
    <div id="toTop" class="fa fa-angle-up"></div>
</aside>
            
        </div>
        <footer id="footer">
    <div class="outer">
        <div id="footer-info" class="inner">
            &copy; 2020 smalljerry<br>
            Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>. Theme by <a target="_blank" rel="noopener" href="http://github.com/ppoffice">Hexo</a>
            .<br/><a target="_blank" rel="noopener" href="http://github.com/ghaseminya"></a>

            <a href="">lala</a>
        </div>
    </div>
</footer>

        
    
    <script>
    var disqus_config = function () {
        
            this.page.url = 'http://dsjerry.gitee.io/mousejerry/2020/07/18/vuex%E5%AD%A6%E4%B9%A0/';
        
        this.page.identifier = 'vuex学习';
    };
    (function() { 
        var d = document, s = d.createElement('script');  
        s.src = '//' + 'dsjerry' + '.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>



    
        
<script src="/mousejerry/libs/lightgallery/js/lightgallery.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-thumbnail.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-pager.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-autoplay.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-fullscreen.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-zoom.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-hash.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-share.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-video.min.js"></script>

    
    
        
<script src="/mousejerry/libs/justified-gallery/jquery.justifiedGallery.min.js"></script>

    



<!-- Custom Scripts -->

<script src="/mousejerry/js/main.js"></script>


    </div>
</body>
</html>